<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="-1">
    <title><if condition="$code eq 10"> {$star.s_name} 正在直播 {$title}<else /> {$title} {$content}</if></title>
    <include file="public@head" />
    <script src="__TMPL__public/assets/sdk/TcPlayer-2.2.0.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <link rel="stylesheet" href="__TMPL__public/assets/js/swiper/swiper.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            -webkit-user-select:none;
            -moz-user-select:none;
            -o-user-select:none;
            user-select:none;
        }
        body{
            color: #00a2d4;
            padding-bottom: 0;
        }
        #play_video{
            /*position: relative;*/
        }
        #top{
            width: 100%;
            position: absolute;
            top: 26px;
            left: 0;
            height: 60px;
            padding: 10px 16px;
            box-sizing:border-box;
            -moz-box-sizing:border-box; /* Firefox */
            -webkit-box-sizing:border-box; /* Safari */
            z-index: 2;
        }
        #host-avatar{
            width: 40px;
            height: 40px;
            border-radius: 20px;
            /*border: 1px solid #bebebe;*/
        }
        #top .info{
            display: inline-block;
            vertical-align: middle;
            color: #fff;
            margin-left: 4px;
        }
        #top .info #host-name{
            display: block;
        }
        #top .host-sid {
            float: right;
            background: rgba(0,0,0,0.3);
            color: #fff;
            padding: 4px 8px;
            border-radius: 5px;
        }
        #play_video .vcp-playing,#play_video .vcp-player{
            margin: 0 auto;
        }
        #play_video .vcp-player{
            /*z-index: 3;*/

        }
        .main{
            margin: 0 auto;
            height: 100%;
        }
        /*play_bg_hide*/
        .vcp-bigplay{
            display: none!important;
        }
        .vcp-loading{
            margin-top: 0!important;
        }
        .play-btn{
            display: inline-block;
            position: absolute;
            opacity: 1;
            width: 80px;
            height: 80px;
            left: 50%;
            top: 50%;
            margin: -40px 0 0 -40px;
            cursor: pointer;
            background-position: -1px -81px;
            background-image: url("__TMPL__public/assets/img/sprite_icon.png");
            background-repeat: no-repeat;
            z-index: 1000;
            display: none;
        }

        #shopping-wrap{
            position: absolute;
            top: 80px;
            right: 8px;
            z-index: 2;
        }

        #shopping-wrap{
            display:flex;
            display:-webkit-flex;
            flex-flow: column;
            -webkit-flex-flow: column;
        }
        #shopping-wrap a{
            flex: 1;
            margin-bottom: 8px;
            /*min-width: 80px;*/
            width: 40px;
            height: 40px;
            overflow: hidden;
            /*background: rgba(0,0,0,0.3);*/
            color: #fff;
            text-align: center;
            font-size: 24px;
        }
        #shopping-wrap a img{
            height: 100%;
            /*background: rgba(255,255,255,0.5);*/
        }
        .vcp-player video{
            margin: 0 auto;
            object-fit: cover;
        }
        .comments-wrap{
            position: absolute;
            width: 80%;
            height: 100px;
            left: 0;
            bottom: 80px;
            z-index: 10001;
            overflow: hidden;
            overflow-y: auto;
        }
        .comments-wrap::-webkit-scrollbar {display:none}
        .fans-name {
            width: 70px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 4px;
            color: #ffbd34;
        }
        .comments-list-wrap li span {
            vertical-align: middle;
            line-height: 24px;
        }

        .comments-list-wrap li span.fans-name {
            display: inline-block;
            width: auto;
            max-width: 100px;
        }
        .comments-list-wrap li span.comments_text {
            color: #fff;
        }


        /*粉丝等级图标引入*/
        /*用户等级图标*/
        .user_leval_mark{
            display: inline-block;
            width: 22px;
            height: 22px;
        }
        .user_leval_1{
            background: url(__TMPL__public/assets/img/leval1.png) no-repeat;
            background-size: cover;
        }
        .user_leval_2{
            background: url(__TMPL__public/assets/img/leval1.png) no-repeat;
            background-size: cover;
        }
        .user_leval_3{
            background: url(__TMPL__public/assets/img/leval1.png) no-repeat;
            background-size: cover;
        }
        .user_leval_4{
            background: url(__TMPL__public/assets/img/leval1.png) no-repeat;
            background-size: cover;
        }
        .user_leval_5{
            background: url(__TMPL__public/assets/img/leval1.png) no-repeat;
            background-size: cover;
        }

        /*swiper样式*/
        .swiper-container {
            width: 100%;
            height: 130px;
            margin: 10px auto;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            width: 130px;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .playback-container{
            position: relative;
        }
        .playback-wrap .item{
            display: block;
            width: 130px;
            height: 130px;
            background-size: cover;
            background-position: center;
        }
        .playback-wrap .item:first-child{
            margin-left: 8px;
        }
        .playback-wrap .item:last-child{
            margin-right: 8px;
        }
       /* input[type=text]{
            height: 30px; line-height: 30px; position: absolute; bottom: 10px;left: 0; right: 0; z-index: 100000000000000;
            border: 1px solid red;
        }*/

        #share-title{
            width: 100%;
            text-align: center;
            background: rgba(0,0,0,0.3);
            color: #fff;
            height: 26px;
            line-height: 26px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .footer{
            width: 100%;
            position: absolute;
            bottom: 20px;
            z-index: 3;
            display: none;
        }
        .footer .tool-wrap{
            height: 44px;
            padding: 10px;
        }
        .footer #js-start-talk{
            display: inline-block;
            width: 44px;
            height: 44px;
            background: url(__TMPL__public/assets/img/icon_chat.png) no-repeat;
            background-size: cover;

        }

        .footer #js-talk-ipt-wrap{
            background: rgba(255,255,255,0.8);
            position: relative;
        }

        .footer #js-talk-ipt-wrap #js-talk-ipt{
            width: 100%;
            height: 50px;
            line-height: 30px;
            display: block;
            box-sizing: border-box;
            padding: 10px 100px 10px 10px;
            border: none;
            background: none;

        }
        .footer #js-talk-ipt-wrap #js-send-talk-btn{
            width: 80px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-left: 1px solid #ccc;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            z-index: 2;

        }
        #video_sms_list{
            padding: 4px 0;
        }
        #video_sms_list li{
            line-height: 26px;
            word-break: break-all;
            margin-bottom: 4px;
        }
        .vcp-poster-pic.cover{
            height: 100%!important;
            width: auto!important;
        }
        #video_sms_list li div.inline-bg{
            display: inline-block;
            background: rgba(0,0,0,0.2);
            padding: 0 6px;
            margin-left: 6px;
            border-radius: 6px;
        }

        .playback-tips-wrap{
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        .playback-tips-wrap .back-img{
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            -moz-transform: perspective(1px) translate(-50%,-50%);
            -webkit-transform: perspective(1px) translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: perspective(1px) translate(-50%,-50%);
        }
        .playback-tips-wrap span.opacity-bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 2;
        }

        .playback-tips-wrap .back-tips-text{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            color: #fff;
        }

        .playback-tips-wrap .back-tips-text h1{
            width: 100%;
            text-align: center;
            color: #fff;
            line-height: 30px;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -16px;
            font-size: 16px;
        }
        .top-left-wrap{
            display: inline-block;
            background: rgba(0,0,0,0.3);
            border-radius: 20px;
            min-width: 120px;
            padding-right: 20px;
        }


    </style>
    <cross-domain-policy>
        <allow-access-from domain="*.qq.com" secure="false"/>
    </cross-domain-policy>
</head>
<body>
<div class="main">
    <if condition="$code eq 10">
        <div id="play_video" style="width:100%; overflow: hidden;">
            <h3 id="share-title" style="">
                CABRIDA
            </h3>
            <section id="top">
                <div class="top-left-wrap">
                    <img id="host-avatar" src={$star.u_avatar}" >
                    <article class="info">
                        <span id="host-name">{$star.s_name}</span>
                        <span class="fans-num">{$star.l_viewing}</span>在线
                    </article>
                </div>
                <span class="host-sid">LSID：{$star.s_udid}</span>
            </section>
            <aside id="shopping-wrap" style="display: none;">
                <foreach name="mall" item="vo">
                    <a href="{$vo.a_url}"><img src="{$vo.a_image}" alt="{$vo.a_title}"></a>
                </foreach>
            </aside>
            <div class="comments-wrap">
                <ul id="video_sms_list" class="comments-list-wrap">

                </ul>
            </div>
            <span class="play-btn"></span>
            <div class="footer">
                <div class="tool-wrap">
                    <span class="talk talk-click" id="js-start-talk"></span>
                </div>
                <div class="talk-box" id="js-talk-ipt-wrap" style="display: none;">
                    <input type="text" id="js-talk-ipt" class="talk-input" placeholder="点击这输入文字" value="" maxlength="200"><a href="javascript:;" class="talk-btn js-talk-btn" id="js-send-talk-btn">发送</a>
                </div>
            </div>
        </div>
        <elseif  condition="$code eq 20"/>
        <div id="play_video" style="width:100%; overflow: hidden;">
            <h3 id="share-title" style="">
                CABRIDA
            </h3>
            <section id="top">
                <div class="top-left-wrap">
                    <img id="host-avatar" src={$star.u_avatar}" >
                    <article class="info">
                        <span id="host-name">{$star.s_name}</span>
                        观看人数：<span class="fans-num">{$star.l_viewing}</span>
                    </article>
                </div>
                <span class="host-sid">LSID：{$star.s_udid}</span>
            </section>
            <span class="play-btn"></span>

        </div>
        <else />
        <div class="playback-tips-wrap">
            <img class="back-img" src="__TMPL__public/assets/img/cabrida_pic.jpg" alt="">
            <span class="opacity-bg"></span>
            <div class="back-tips-text">
                <h1>直播已结束，回放正在生成</h1>
                <!--<p style="text-align: center;color: #0089d4; line-height: 24px; "><a href="{$url}" target="_blank" style="text-decoration: underline;">登录查看更多</a></p>-->
            </div>
        </div>
    </if>
    <!--{:dump($star)}
        {:dump($url)}-->
    <!--swiper-->
    <div class="swiper-container playback-container"  style="display: none;">
        <div class="swiper-wrapper playback-wrap">
            <div class="swiper-slide">
                <a class="item" href="" style="background-image: url('__TMPL__public/assets/img/test_f.jpg')"></a>
            </div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide">查看更多</div>
        </div>
    </div>

    <!--<div style="height: 80px;"></div>-->

</div>

<include file="public@footer" />
<script src="__TMPL__public/assets/js/jquery.min.js"></script>
<script src="__TMPL__public/assets/js/swiper/swiper.min.js"></script>
<script src="__TMPL__public/assets/js/common.js"></script>
<script src="__TMPL__public/assets/sdk/webim.js"></script>
<script src="__TMPL__public/assets/sdk/json2.js"></script>
<script type="text/javascript">
    function getLogInfo (){
        var loginInfo = {
            'sdkAppID': "", //用户所属应用id,必填
            'appIDAt3rd': "", //用户所属应用id，必填
            'accountType': "", //用户所属应用帐号类型，必填
            'identifier': "", //当前用户ID,必须是否字符串类型，选填
            'identifierNick': "", //当前用户昵称，选填
            'userSig': "", //当前用户身份凭证，必须是字符串类型，选填
            'headurl': "" //当前用户默认头像，选填
        };
        <if condition="$code eq 10">
            loginInfo.sdkAppID = "{$user.sdkAppID}";
            loginInfo.appIDAt3rd = "{$user.sdkAppID}";
            loginInfo.accountType = "{$user.accountType}";
            loginInfo.identifier = "{$user.identifier}";
            loginInfo.identifierNick = "{$user.identifierNick}";
            loginInfo.userSig = "{$user.userSig}";
            loginInfo.headurl = "{$user.headurl}";
            return loginInfo;
            <elseif  condition="$code eq 20"/>
            <else />
        </if>
        return loginInfo;
    }
</script>
<script src="__TMPL__public/assets/js/im_visit.js"></script>
<script>
    $(function(){

        var live_flag = true, //类型：直播还是回放
            coverpic_src = "", //封面路径
            live_url = '',    //移动端视频格式
            live_flv_url = '',//PC端观看视频格式为MP4
            shopping_wrap = $("#shopping-wrap"),//右侧广告
            play_btn = $(".play-btn"),
            tool_footer = $(".footer"),
            btn_talk = $("#js-start-talk"), //聊天图标
            talk_wrap = $("#js-talk-ipt-wrap"),//聊天容器
            chat_input =  $("#js-talk-ipt"),//聊天input
            tool_wrap = $(".tool-wrap"), //图标容器
            btn_send = $("#js-send-talk-btn"), //发消息按钮
            flag = IsPC(), //true为PC端，false为手机端
            live_width = 0,
            live_height = 0,
            screen_height = window.screen.height,//屏幕高度
            andr_height = screen_height - 20, //安卓手机视频高度设为满屏减去20
            inner_height = window.innerHeight,//窗口的文档显示区的高度
            video_height = inner_height,
            u = navigator.userAgent,
            isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
            isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

        //10 正在直播 20回放  else是停止
        <if condition="$code eq 10">
            coverpic_src = "{$star.s_image}";
            live_url = "{$url[2]}";
            live_flv_url = "{$url[1]}";
            <elseif  condition="$code eq 20"/>
            coverpic_src = "{$star.s_image}";
            live_flag = false;
            live_url = "{$url['transcodeList'][2]['url']}";
            <else />
        </if>;

        //回放滑动列表  仿照快手
        /* var swiper = new Swiper('.swiper-container', {
         scrollbar: null,
         scrollbarHide: true,
         slidesPerView: 'auto',
         centeredSlides: false,
         spaceBetween: 8,
         grabCursor: false,
         momentumBounce:0
         });*/
        btn_talk.on("click",function(){
            tool_wrap.hide();
            talk_wrap.show();
        });

        chat_input.blur(function(){
            if(!$(this).val()){
                talk_wrap.hide();
                tool_wrap.show();
            }
        });
        chat_input.focus(function(){
            if(isiOS&&$("body").scrollTop()!=screen_height/2){
                setTimeout(function(){
//                    $("#share-title").html(screen_height);
                    $("body").animate({scrollTop:screen_height/2},500);
                },500);
            }
        });

        function IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }

        if(flag){
            $(".main").width(500).css({"position":"relative","overflow":"hidden"});
            live_width =500;
            live_height = live_width*16/9;
        }else {
            live_flv_url = "";
            live_width = window.screen.width;
            live_height = Math.ceil(live_width*16/9);
        }

        var player =  new TcPlayer('play_video', {
            "m3u8": live_url,
            "flv":  live_flv_url, //增加了一个flv的播放地址，用于PC平台的播放
            "autoplay" : false,      //iOS下safari浏览器是不开放这个能力的
            "coverpic" : {"style": "cover", "src": coverpic_src},
            "controls":"none",
            "live": live_flag,
            "x5_player":true,
            "x5_type":"h5",
            "x5_fullscreen":true,
            "width" :  live_width,
            "height" : video_height,
            listener: function (msg) {
                // console.log('listener',msg);
                if(msg.type == 'error'){
                    window.setTimeout(function(){
//                            player.load();//进行重连
                    },5000);
                }
                var player_vcp = $(".vcp-player"),
                        player_video = $("video");
                function playToggle (){
                    if(player.playing()){
                        play_btn.hide();
                        tool_footer.show();
                        shopping_wrap.show();
                        if(isAndroid){
                            player_vcp.attr("style",'width:'+live_width+"px!important;"+'height:'+andr_height+"px!important;");
                            player_video.attr("style",'width:'+live_width+"px!important;"+'height:'+andr_height+"px!important;");
                        }
                    }else {
                        shopping_wrap.hide();
                        tool_footer.hide();
                        play_btn.show();
                        if(isAndroid){
                            player_vcp.attr("style",'width:'+live_width+"px!important;"+'height:'+video_height+"px!important;");
                            player_video.attr("style",'width:'+live_width+"px!important;"+'height:'+video_height+"px!important;");
                        }
                    }
                }
                playToggle();
                play_btn.off("click").on("click",function(){
                    player.play();
                });
            }
        });

    });

</script>
<script type="text/javascript">
    $(function () {
        $.get('https://www.wzxaini9.cn/api/flow/index/id/10', function (data) {
            console.log($.parseJSON(data));
        })
    });
</script>
<!--script>
    /*
     * 注意：
     * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
     * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
     * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     * 文档
     *https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN
     * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
     * 邮箱地址：weixin-open@qq.com
     * 邮件主题：【微信JS-SDK反馈】具体问题
     * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
     */

    var title_share = iService.getQueryString("title"),
    content_share = iService.getQueryString("content");

    wx.config({
        debug: true,
        appId: 'appId',
        timestamp: 'timestamp',
        nonceStr: 'nonceStr',
        signature: 'signature',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
        ]
    });
    wx.ready(function () {
        // 在这里调用 API
        'wx.hideOptionMenu',
        'wx.showOptionMenu',
        'onMenuShareTimeline',
        'onMenuShareAppMessage'
    });
</script>
<script>
    $(function() {
        wx.ready(function () {
            wx.onMenuShareTimeline({
                title: title_share,
                link: "链接",
                imgUrl: '图片',
                success: function () {
                },
                cancel: function () {
                }
            });

            wx.onMenuShareAppMessage({
                title: title_share,
                desc: content_share,
                link: "链接",
                imgUrl: '图片',
                type: '',
                dataUrl: '',
                success: function () {
                },
                cancel: function () {
                }
            });
        });
    });
</script-->
</body>
</html>